<template>
<div class="navBody">
  <el-menu router default-active="task" class=" el-menu-vertical-demo" >
    <div>
      <el-popover
          class="navImageIt"
          placement="right"
          width="50"
          trigger="click">
        <el-link slot="reference" class="imageIt" :underline="false">
          <el-image
              :src="require('../assets/head.png')"
              lazy
              class="imageIt"
          />
        </el-link>
        <div class="flex-column" style="align-items: center">
          <el-button class="width_80 el-button noPaddingMargin el-button--primary"><i class="el-icon el-icon-setting"></i>设置</el-button>
          <el-button @click="logOut" class="width_80 el-button noPaddingMargin el-button--primary"><i class="el-icon el-icon-delete"></i>退出</el-button>
        </div>
      </el-popover>
      <el-menu-item index="ManPageRightTab1">
        <el-tooltip class="item" effect="dark" content="任务" placement="right">
          <i  @click="$router.replace('/')" class="el-icon-menu"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item index="ManPageRightTab2" >
        <el-tooltip class="item" effect="dark" content="日历图" placement="right">
          <i @click="$router.replace('/')" class="el-icon-date"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item index="ManPageRightTab3" >
        <el-tooltip class="item" effect="dark" content="习惯打卡" placement="right">
          <i @click="$router.replace('/')" class="el-icon-time"></i>
        </el-tooltip>
      </el-menu-item>
    </div>



  </el-menu>
</div>
</template>

<script>
export default {
name: "ManPageLeft",
  methods:{
    logOut(){
      this.$cookie.delete("userId")
      location.reload()
      this.$message.success('退出成功')
    }
  },
  mounted() {
    this.$emit("getIt",this.$route.path);
    console.log(this.$route.path)
  }
}
</script>

<style scoped>
.item{
  font-size: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.navBody{
  min-width: 74px;
  height: 100%;
  box-shadow: #a6eaea 0 0 0 1px;
  background: rgba(227, 221, 221, 0.3);
  backdrop-filter: blur( 5.5px );
  -webkit-backdrop-filter: blur( 5.5px );
  border-radius: 10px;
  border: 0px solid rgba( 255, 255, 255, 0.18 );
}
.el-menu-vertical-demo{
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  background: #c7dae3;
}
.imageIt{
  width: 80%;
  border-radius: 5px;
}
.navImageIt{
  position: absolute;
  top: 10px;
  left: 15%;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-underline: #e2e1e1;
}
.el-button{
  height: 30px;
  width: 80%;
  margin-bottom: 4px!important;
}
.el-icon{
  margin-right: 10px;
}
</style>
